<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>班次管理</title>
    <meta name="decorator" content="nblank"/>
    <link href="${ctxStatic}/modules/biz/monitorCenter/handover.css" itself="true" rel="stylesheet">
</head>
<body>
<div class="content container">
    <h2 class="page-title">班次管理
        <small> 班次修改</small>
    </h2>
    <section class="widget widget-tabs widget-table-overflow ">
        <header>
            <ul class="nav nav-tabs">
                <li><a href="${ctx}/biz/handover/" id="show_detail">班次查看</a></li>
                <li class="active"><a href="javascript:;">班次修改</a></li>
            </ul>
        </header>
        <div class="body tab-content">
            <form:form id="inputForm" modelAttribute="handover" action="${ctx}/biz/handover/save" method="post"
                       class="form-horizontal">
                <form:hidden path="id"/>
                <sys:message content="${message}"/>
                <div class="form-inline padding-2">
                    <div class="form-group no-margin col-md-6">
                        <label class="control-label col-md-4 col-md-offset-2"><span
                                style="color:red;">*</span>最少人数:</label>
                        <div class="col-md-2">
                            <form:input path="leastPeople" htmlEscape="false" maxlength="50" value="1"
                                        class="form-control input-transparent "/>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="control-label col-md-4"><span style="color:red;">*</span>缓冲时间:</label>
                        <div class="input-group  col-md-8">
                            <form:input path="bufferTime" htmlEscape="false" maxlength="11"
                                        class="form-control input-transparent"/>
                            <div class="input-group-addon">分钟</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-12">（时间范围:1~30分钟）</label>
                    </div>
                </div>
                <fieldset class="mt-sm no-margin">
                    <legend>
                        班次及时间设置
                            <%--<small>班次时间1</small>--%>
                    </legend>
                </fieldset>
                <div class="form-group margin-top-20">
                    <label class="control-label col-md-2"><span style="color:red;">*</span>班别一名称:</label>
                    <div class="col-md-2">
                        <form:input path="name1" htmlEscape="false" maxlength="50" date-date=""
                                    class="form-control input-transparent"/>
                    </div>
                    <label class="control-label col-md-1"><span style="color:red;">*</span>起止时间:</label>
                    <div class="col-sm-5 col-md-5 form-inline">
                        <div class="row">
                            <div class="input-group date col-sm-5 timeb1" data-date="1970-01-01 00:00"
                                 data-link-field="stime1">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                            <span>-</span>
                            <div class="input-group date col-sm-5 timee1" data-date="1970-01-01 00:00"
                                 data-link-field="etime1">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1">
							<span class="btn btn-default fileinput-button mr-xs" id="add">
								<i class="glyphicon glyphicon-plus"></i>
								<span>增加班次</span>
						    </span>
                    </div>
                </div>
                <div class="form-group border1 hide">
                    <label class="control-label col-md-2">班别二名称:</label>
                    <div class="col-md-2">
                        <form:input path="name2" htmlEscape="false" maxlength="50"
                                    class="form-control input-transparent"/>
                    </div>
                    <label class="control-label col-md-1">起止时间:</label>
                    <div class="col-sm-5 col-md-5 form-inline">
                        <div class="row">
                            <div class="input-group date col-sm-5 timeb2" data-date="1970-01-01 00:00"
                                 data-link-field="stime2">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                            <span>-</span>
                            <div class="input-group date col-sm-5 timee2" data-date="1970-01-01 00:00"
                                 data-link-field="etime2">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 removebtn1">
							<span class="btn btn-default fileinput-button mr-xs">
								<i class="glyphicon glyphicon-minus"></i>
						    </span>
                    </div>
                </div>
                <div class="form-group border2 hide">
                    <label class="control-label col-md-2">班别三名称:</label>
                    <div class="col-md-2">
                        <form:input path="name3" htmlEscape="false" maxlength="50"
                                    class="form-control input-transparent"/>
                    </div>
                    <label class="control-label col-md-1">起止时间:</label>

                    <div class="col-sm-5 col-md-5 form-inline">
                        <div class="row">
                            <div class="input-group date col-sm-5 timeb3" data-date="1970-01-01 00:00"
                                 data-link-field="stime3">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                            <span>-</span>
                            <div class="input-group date col-sm-5 timee3" data-date="1970-01-01 00:00"
                                 data-link-field="etime3">
                                <input htmlEscape="false" maxlength="50" readonly="true" size="16"
                                       class="form-control input-transparent"/>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>
                                <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 removebtn2">
							<span class="btn btn-default fileinput-button mr-xs">
								<i class="glyphicon glyphicon-minus"></i>
						    </span>
                    </div>
                </div>
                <input type="hidden" id="stime1" name="stime1" value=""/><input type="hidden" id="etime1" name="etime1"
                                                                                value=""/>
                <input type="hidden" id="stime2" name="stime2" value=""/><input type="hidden" id="etime2" name="etime2"
                                                                                value=""/>
                <input type="hidden" id="stime3" name="stime3" value=""/><input type="hidden" id="etime3" name="etime3"
                                                                                value=""/>
                <div class="form-actions">
                    <div class="text-align-center">
                        <input id="btnCancel" class="btn btn-default" type="button"
                               style="margin-left: -50px;min-width:100px;" value="返 回" onclick="history.go(-1)"/>
                        <input id="btnSubmit" class="btn btn-primary" style="margin-left:50px;min-width:100px;"
                               type="submit" value="保 存"/>&nbsp;
                    </div>
                </div>
            </form:form>
        </div>
    </section>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#inputForm").validate({
            invalidHandler: function (event, validator) {
                $("#btnSubmit").attr("disabled", false)
            },
            submitHandler: function (form) {
                $('#btnSubmit').attr("value", "提交中...").attr("disabled", true);
                var leastPeople = form.leastPeople.value;
                var curBTime = form.bufferTime.value;
                var vname1 = form.name1;
                var vname2 = form.name2;
                var vname3 = form.name3;
                var vstime1 = form.stime1;
                var vetime1 = form.etime1;
                var vstime2 = form.stime2;
                var vetime2 = form.etime2;
                var vstime3 = form.stime3;
                var vetime3 = form.etime3;

                if (leastPeople < 1 || leastPeople > 10) {
                    Messenger().post("请填写正确范围内的最少值班人数!");
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if (curBTime < 1 || curBTime > 30) {
                    Messenger().post("请填写正确范围内的缓冲时间!");
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if (vname1.value == "") {
                    Messenger().post("请填写班别一的名称!");
                    vname1.focus();
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if (vname1.value.length > 10) {
                    Messenger().post("班别名称不能大于10个字符!");
                    vname1.focus();
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if (vstime1.value == "") {
                    Messenger().post("请选择(" + vname1.value + ")的开始时间!");
                    timeb1.datetimepicker('show');
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if (vetime1.value == "") {
                    Messenger().post("请选择(" + vname1.value + ")的结束时间!");
                    timee1.datetimepicker('show');
                    $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                    return false;
                }
                if ($(".border1").hasClass("hide")) {
                    if (Date.parse(vetime1.value) - Date.parse(vstime1.value) != 86400000) {
                        Messenger().post("请保证交接班时间的完整!");
                        timeb1.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                }
                if (!$(".border1").hasClass("hide")) {
                    if (vname2.value == "") {
                        Messenger().post("请填写班别二的名称!");
                        vname2.focus();
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vname2.value.length > 10) {
                        Messenger().post("班别名称不能大于10个字符!");
                        vname2.focus();
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vstime2.value == "") {
                        Messenger().post("请选择(" + vname2.value + ")的开始时间!");
                        timeb2.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vstime2.value != vetime1.value) {
                        Messenger().post("班次的开始时间需要与上个班次的结束时间相等");
                        timeb2.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vetime2.value == "") {
                        Messenger().post("请选择(" + vname2.value + ")的结束时间!");
                        timee2.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if ($(".border2").hasClass("hide")) {
                        if (Date.parse(vetime2.value) - Date.parse(vstime1.value) != 86400000) {
                            Messenger().post("请保证交接班时间的完整!");
                            timee2.datetimepicker('show');
                            $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                            return false;
                        }
                    }
                }
                if (!$(".border2").hasClass("hide")) {
                    if (vname3.value == "") {
                        Messenger().post("请填写班别三的名称!");
                        vname3.focus();
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vname3.value.length > 10) {
                        Messenger().post("班别名称不能大于10个字符!");
                        vname3.focus();
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vstime3.value == "") {
                        Messenger().post("请选择(" + vname3.value + ")的开始时间!");
                        timeb3.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vstime3.value != vetime2.value) {
                        Messenger().post("班次的开始时间需要与上个班次的结束时间相等");
                        timeb3.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (vetime3.value == "") {
                        Messenger().post("请选择(" + vname3.value + ")的结束时间!");
                        timee3.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                    if (Date.parse(vetime3.value) - Date.parse(vstime1.value) != 86400000) {
                        Messenger().post("请保证交接班时间的完整!");
                        timee3.datetimepicker('show');
                        $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                        return false;
                    }
                }
                $(form).ajaxSubmit({
                    success: function (msg) {
                        if (msg == "-1") {
                            Messenger().post("请先关闭当前班次,再进行修改操作!");
                        } else if (msg == "-2") {
                            Messenger().post("修改操作失败!");
                        } else if (msg == "1") {
                            Messenger().post("修改成功,即将跳转到查看页!");
                            setTimeout(function () {
                                $("#show_detail").trigger("click");
                            }, 1000)
                        }
                    }
                })
            },
            errorContainer: "#messageBox",
            errorPlacement: function (error, element) {
                $('#btnSubmit').attr("value", "保存").attr("disabled", false);
                $("#messageBox").text("输入有误，请先更正。");
                if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
    });
</script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    var endTimeValue = "";
    var timeb1 = $('.timeb1').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
        endTimeValue = new Date(e.date.valueOf() + 1 * 24 * 60 * 60 * 1000);
        timee1.datetimepicker("setEndDate", endTimeValue);
        timeb2.datetimepicker("setEndDate", endTimeValue);
        timee2.datetimepicker("setEndDate", endTimeValue);
        timeb3.datetimepicker("setEndDate", endTimeValue);
        timee3.datetimepicker("setEndDate", endTimeValue);

        timee1.datetimepicker("setStartDate", e.date);
    });
    var timee1 = $('.timee1').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
        timeb2.datetimepicker("setStartDate", e.date);
    });

    var timeb2 = $('.timeb2').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
        timee2.datetimepicker("setStartDate", e.date);
    });

    var timee2 = $('.timee2').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
        timeb3.datetimepicker("setStartDate", e.date);
    });

    var timeb3 = $('.timeb3').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
        timee3.datetimepicker("setStartDate", e.date);
    });

    var timee3 = $('.timee3').datetimepicker({
        autoclose: true,
        format: "hh:ii",
        language: 'zh-CN',
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0,
        startDate: "1970-01-01 00:00",
        endDate: "1970-01-02 00:00",
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    }).on('changeDate', function (e) {
//        console.info("thisTime is =",$(".timee1").datetimepicker({
//            startDate: e.date.valueOf(),
//            endDate: "1970-01-02 00:00"
//        }));
    });

    $("#add").click(function () {
        if ($(".border1").hasClass("hide")) {
            $(".border1").removeClass("hide");
            return false;
        }
        if ($(".border2").hasClass("hide")) {
            $(".border2").removeClass("hide");
            $(".removebtn1").hide();
            $("#add").hide();
            return false;
        }
    });

    $(".removebtn1").click(function () {
        $(".border1").addClass("hide")
        $("#name2").val("");
        $(".timeb2 .glyphicon-remove").trigger("click");
        $(".timee2 .glyphicon-remove").trigger("click");
    });

    $(".removebtn2").click(function () {
        $(".removebtn1").show();
        $("#add").show();
        $(".border2").removeClass("hide").addClass("hide");
        $("#name3").val("");
        $(".timeb3 .glyphicon-remove").trigger("click");
        $(".timee3 .glyphicon-remove").trigger("click");
    });

</script>
</body>
</html>